<script setup>
import { ref, onMounted } from "vue"

const props = defineProps({
	form: {
		type: Object,
		default: () => ({
			title: "",
			content: "",
		}),
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	buttonCount: {
		type: Number,
		default: 0,
	},
})

const formData = ref({
	title: props.form.title,
	content: props.form.content,
	type: props.form.type,
})

const emit = defineEmits(["submit", "close"])

const hancleClick = () => {
	if (formData.value.title.trim() == "") {
		alert("标题不能为空")
		return
	}
	emit("submit", formData.value)
}

const formRules = {
	required: true,
	message: "标题不能为空",
	trigger: "blur",
}
</script>

<template>
	<div class="container">
		<el-form
			:model="formData"
			label-width="auto"
			style="max-width: 600px">
			<el-form-item
				label="标题："
				:rules="formRules">
				<el-input
					v-model="formData.title"
					placeholder="请输入标题"
					required="true"
					message="标题不能为空"
					:disabled="disabled" />
			</el-form-item>
			<el-form-item label="内容：">
				<el-input
					class="textarea"
					:disabled="disabled"
					v-model="formData.content"
					type="textarea" />
			</el-form-item>
			<el-form-item class="btn-group">
				<el-button
					class="btn"
					@click="emit('close')">
					取消
				</el-button>
				<el-button
					class="btn btn-secondary"
					v-if="buttonCount == 2"
					type="primary"
					@click="hancleClick">
					确定
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style scoped>
.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #904f4f;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px #000000;
	width: 500px;
	height: 400px;
	z-index: 3;
	.input {
		width: 100%;
		height: 30px;
		margin-bottom: 10px;
		border-radius: 5px;
		border: none;
		padding: 5px;
		font-size: 16px;
	}
	.textarea {
		width: 100%;
		height: 450px;
		margin-bottom: 10px;
		border-radius: 5px;
		border: none;
		padding: 5px;
		font-size: 16px;
		resize: none;
	}
	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		.btn {
			flex: 1;
			margin: 0 5px;
			width: 100px;
			height: 30px;
			border-radius: 5px;
		}
		.btn-secondary {
			background-color: #26e85a;
		}
	}
}
</style>
